<script setup>
import {defineEmits, defineProps, ref} from "vue";
import request from '@/api/request'
import {useRouter} from "vue-router"
import {Delete, Edit, Plus} from '@element-plus/icons-vue'

let emits=defineEmits(["ref-table"])

let processSteps = ref([])
let onSubmit = () => {
     request({
        url: '/processStep/update',
        method: 'put',
        data: processStep.value
    }).then(res => {
         emits("ref-table")
    })
   
}
let loadprocedure = ()=>[
    request.get('/processStep/index').then(res=>{
        processSteps.value = res.data;
    })
]
loadprocedure()

// 接收父组件传递的编辑数据
let props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});



// 表单数据
let processStep = ref({
    ...props.data
});



let title = ref("")
let isVisible = ref(false)
let router = useRouter();


const value1 = ref(true)
const radio1 = ref('1')
let zhuangtai=ref(false);
let MaterialManagement=ref({})
//步骤


// let columns = [
//     { id: "number_id", label: "顺序编号" },
//     { id: "Step_instructions", label: "步骤说明" },
//     { id: "Auxiliary_equipment", label: "辅助设备" },
//     { id: "Auxiliary_materials", label: "辅助材料" },
//     { id: "remark", label: "备注" },
    
// ]

let sequenceId=ref([])
let page = ref({
    current: 1,
    size: 5,
    total: 0,
    records: []
})

let Step = ref({
    sequenceId:''
})
 
//加载数据表格

let loadData  = () => {
    request({
        url: '/orderSteps/index',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            processId : processStep.value.processId
        }
    }).then(res => {
        page.value.records.sort((a, b) => a.uniqueIndex - b.uniqueIndex)
         res.data.records.forEach((item, index) => {
            item.uniqueIndex = (page.value.current - 1) * page.value.size + index + 1;
        });
        page.value = res.data
    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}
let data1 = ref(null)
loadData() 

let refTanle = () => {
    isVisible.value = false;
    loadData();
}

let toInsert = () => {
    title.value = "添加步骤";
    isVisible.value = true;
    data1.value = processStep.value.processId
    router.push("/material/procedure/insertstep");
}
let toUpdate = async(row) => {
    title.value = "修改步骤";
    isVisible.value = true;
    if(row!=null){
        data1.value=row;
    }else{
        data1.value=sequenceId.value[0]
    }
    router.push("/material/procedure/updatestep");
}
//批量删除
let toRemove = () => {
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/orderSteps/delete",
            method: "delete",
            data: sequenceId.value
        }).then(res => {
            ElMessage.success('删除成功')
            loadData()
    })
    })
}
//单删
let toRemoves = (id) => {
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/orderSteps/delete",
            method: "delete",
            data: [id]
        }).then(res => {
            ElMessage.success('删除成功')
            loadData()
    })
    })
}
let fuxuankuang=(a)=>{
    sequenceId.value=a;
}

</script>
<template>
    <div>
        <el-card>
            <template #header>
                <el-form :model="processStep" ref="form" label-width="80px" :inline="false" class="card_wrap">
                    <el-form-item label="编号" class="c_item">
                            <el-input v-model="processStep.processId"disabled style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" class="c_item">
                           
                            <el-input v-model="processStep.processName" style="width: 150px;"></el-input>
                    </el-form-item>
                         
                            <el-form-item label="是否启用" class="c_item">
                                
                                <el-radio-group v-model="processStep.isEnabled" >
                                    <el-radio label="是" :value="0">是</el-radio>
                                    <el-radio label="否" :value="1">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                           
                            <el-form-item label="说明" class="c_item_big">
                            
                            <el-input v-model="processStep.processIllustrate" placeholder="请输入内容" style="width: 800px;height: 60px;"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="" class="c_item_xian">
                                   
                            </el-form-item> -->





                            <el-divider content-position="center">操作步骤</el-divider>
                            <el-form ref="formRef" inline :model="processStep"
                                style="display: flex;justify-content: start;" class="card_wrap">
                            </el-form>

                            
                            <div style="margin-top: 20px;">
                                <el-button @click="toInsert" type="primary" :plain="true" :icon="Plus">添加</el-button> 
                              <!-- 修改：顶部修改按钮绑定新的点击事件handleTopUpdate  -->
                                 <el-button type="success" size="default" :plain=true @click="toUpdate(null)" :icon="Edit" 
                                    style="border:0px" :disabled="sequenceId.length!=1">修改</el-button> 
                                 <!-- 修改：顶部删除按钮绑定批量删除事件handleTopRemove  -->
                                 <el-button type="danger" size="default" :plain=true @click="toRemove" :icon="Delete" 
                                    style="border:0px" :disabled="!sequenceId">删除</el-button> 
                            </div>


                            <el-table :data="page.records" border stripe @selection-change="fuxuankuang">
                                <el-table-column type="selection" width="55" />

                                <el-table-column label="顺序编号" type="index"  prop="uniqueIndex" sortable/>
                                <el-table-column prop="materialUrl" label="材料URL"/>
                                <el-table-column  prop="auxiliaryEquipment" label="辅助设备" />
                                <el-table-column  prop="auxiliaryMaterials" label="辅助材料" />
                                <el-table-column  prop="stepDescription" label="步骤说明" />
                                <el-table-column  prop="remarks" label="备注" />

                                <el-table-column label="操作" fixed="right" >
                                     <template #default="scope">
                                        <el-button size="small" type="primary" @click="toUpdate(scope.row)":row="scope.row":icon="Edit">修改</el-button>
                                        <el-button size="small" type="danger" @click="toRemoves(scope.row)" :icon="Delete">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination @current-change="(val) => { page.current = val; loadData() }" 
                                v-model:currentPage="page.current"
                                :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                            </el-pagination>
                            
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" class="button">确定修改</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
         <div style="width:800px">
                        <el-dialog :title="title" v-model="isVisible" :destroy-on-close="true" width="60%">
                            <router-view @ref-table="refTanle" :data1="data1">
                            </router-view>
                        </el-dialog>
                    </div>
    </div>
</template>
<style scoped>
.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/3);
    min-width: calc((100% - 10px)/3);
    max-width: calc((100% - 10px)/3);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/1);
    min-width: calc((100% - 10px)/1);
    max-width: calc((100% - 10px)/1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}

    .c_item_xian {
    flex: 2;
    margin: 0px 5px 15px 20px;
    width: calc((100%-10px)/1);
    min-width: calc((100% - 10px)/1);
    max-width: calc((100% - 10px)/1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.button{
    margin-top: 15px;
    margin-left: 850px;
}
</style>